<template>
  <div>
    <div class="tHead"
      ><div class="type"
        ><img style="margin: 0 15px 0 20px" src="../../assets/imgs/区管-评价类型.png" />
        <p>指标管理--评价时间</p></div
      ><div class="tHeadNew"
        ><img
          alt="新建评价类型"
          src="../../assets/imgs/区管-新建评价类型.png"
          @click="newAppraiseTime()" /></div
    ></div>
    <div>
      <el-table
        :data="data.timeTable"
        style="width: 100%; font-size: 10px; margin-top: 20px"
        :header-cell-style="{ background: '#e0f4df', color: '#49ac6e' }"
      >
        <el-table-column label="评价时间" prop="time" align="center" />
        <el-table-column label="学期" prop="term" align="center" />
        <el-table-column label="状态" prop="status" align="center">
          <template #default="scope">
            <div v-if="scope.row.status == 'true'"><p style="color: #ff8000">已完成</p></div>
            <div v-else><p style="color: #03cc04">进行中</p></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="edit">
              <img
                src="../../assets/imgs/区管-评价类型-编辑.png"
                @click="handleEdit(scope.$index, scope.row)"
              />
              <img
                src="../../assets/imgs/区管-评价类型-删除.png"
                @click="handleDelete(scope.$index, scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新建 -->
    <div>
      <el-dialog v-model="dialogFormVisible" width="35%" :show-close="false" class="dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <p :id="titleId" :class="titleClass" class="logStyle">新建评价类型</p>
            <el-icon class="el-icon--left" @click="close"
              ><svg
                viewBox="0 0 1024 1024"
                style="color: #cecfce"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                />
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                /></svg
            ></el-icon>
          </div>
        </template>
        <el-form :model="form">
          <el-form-item>
            <el-col :span="3">时间段</el-col>
            <el-col :span="9">
              <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="选择开始时间"
                style="width: 100%"
                format="YYYY年M月D日"
                value-format="YYYY年M月D日"
              />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">~</span>
            </el-col>
            <el-col :span="9">
              <el-date-picker
                v-model="form.date2"
                type="date"
                placeholder="选择结束时间"
                style="width: 100%"
                format="YYYY年M月D日"
                value-format="YYYY年M月D日"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="3">学期</el-col>
            <el-col :span="20">
              <el-select v-model="form.region" placeholder="请选择学期" style="width: 100%">
                <el-option label="2022-2023年第二学期" value="2022-2023年第二学期" />
                <el-option label="2022-2023年第一学期" value="2022-2023年第一学期" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footerBox">
            <span class="dialog-footer">
              <el-button class="btn" @click="dialogFormVisible = false">取消</el-button>
              <el-button class="btn btnC" type="success" @click="addTimeList()">确定</el-button>
            </span>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- 修改 -->
    <div>
      <el-dialog v-model="dialogFormVisible2" width="35%" :show-close="false" class="dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <p :id="titleId" :class="titleClass" class="logStyle">修改评价类型</p>
            <el-icon class="el-icon--left" @click="close"
              ><svg
                viewBox="0 0 1024 1024"
                style="color: #cecfce"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                />
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                /></svg
            ></el-icon>
          </div>
        </template>
        <el-form :model="form">
          <el-form-item>
            <el-col :span="3">时间段</el-col>
            <el-col :span="9">
              <el-date-picker
                v-model="editForm.date1"
                type="date"
                placeholder="选择开始时间"
                style="width: 100%"
                format="YYYY年M月D日"
                value-format="YYYY年M月D日"
              />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">~</span>
            </el-col>
            <el-col :span="9">
              <el-date-picker
                v-model="editForm.date2"
                type="date"
                placeholder="选择结束时间"
                style="width: 100%"
                format="YYYY年M月D日"
                value-format="YYYY年M月D日"
              />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="3">学期</el-col>
            <el-col :span="20">
              <el-select v-model="editForm.region" placeholder="请选择学期" style="width: 100%">
                <el-option label="2022-2023年第二学期" value="2022-2023年第二学期" />
                <el-option label="2022-2023年第一学期" value="2022-2023年第一学期" />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="3">状态</el-col>
            <el-col :span="20">
              <el-select v-model="editForm.status" placeholder="请选择学期" style="width: 100%">
                <el-option label="已完成" value="true" />
                <el-option label="进行中" value="false" />
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footerBox">
            <span class="dialog-footer">
              <el-button class="btn" @click="dialogFormVisible2 = false">取消</el-button>
              <el-button class="btn btnC" type="success" @click="editTimeList()">确定</el-button>
            </span>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addAppraiseTime, delAppraiseTime, editTime, getAppraiseTime } from '@/api/appraiseTime'
import { tr } from 'element-plus/es/locale'
import { reactive, ref } from 'vue'
const dialogFormVisible = ref(false)
const dialogFormVisible2 = ref(false)
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const editForm = reactive({
  id: '',
  date1: '',
  date2: '',
  region: '',
  status: ''
})
let data = reactive({
  timeTable: []
})
const newAppraiseTime = () => {
  dialogFormVisible.value = true
}
const editTimeList = () => {
  editTime({
    id: editForm.id,
    time: `${editForm.date1}-${editForm.date2}`,
    term: editForm.region,
    status: editForm.status
  }).then((resp) => {
    getTimeList()
    dialogFormVisible2.value = false
    console.log(resp)
  })
}
const addTimeList = () => {
  let data = form.date1
  console.log(data)
  addAppraiseTime({
    time: `${form.date1}-${form.date2}`,
    term: form.region
  }).then((resp) => {
    getTimeList()
    dialogFormVisible.value = false
    console.log(resp)
  })
}
const getTimeList = () => {
  getAppraiseTime({
    current: 1,
    size: 10
  }).then((resp) => {
    console.log(resp)
    data.timeTable = resp.data
  })
}
getTimeList()

interface Time {
  id: any
  time: string
  term: string
}

const handleEdit = (index: number, row: Time) => {
  console.log(index, row)
  editForm.id = row.id
  dialogFormVisible2.value = true
}
const handleDelete = (index: number, row: Time) => {
  console.log(index, row)
  delAppraiseTime({
    id: row.id
  }).then((resp) => {
    getTimeList()
    console.log(resp)
  })
}
</script>

<style>
.footerBox {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: -20px;
}
.dialog-footer {
  width: 80%;
  display: flex;
  justify-content: center;
}
.btnC {
  background-color: #2c8f79;
}
.btn {
  border-radius: 15px;
  width: 95px;
}
.logStyle {
  color: #3faa63;
  font-size: 15px;
  font-weight: bold;
}
.dialog {
  border-radius: 25px;
}
.el-dialog__header {
  background-color: #edf9ed;
  margin-right: 0px;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
}
.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: #3eab63;
}
.edit {
  display: flex;
  justify-content: center;
}
.edit img {
  width: 18px;
  margin: 0px 12px 0px 12px;
}
.type {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
}
.type1 {
  display: flex;
  justify-content: center;
}
.tHead {
  background-color: #ffffff;
  width: 100%;
  height: 55px;
  display: flex;
  border-radius: 10px;
  color: #7a7a7a;
}
.tHeadNew {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 50%;
  padding-right: 50px;
}
</style>
